<template>
  <div style="width: 500px">
    <ProForm v-model="formData" label-width="100px" ref="proForm" :configs="configs" :rules="rules">
      <template #customSlot>
        <el-input placeholder="请填写插槽" v-model="formData['customSlot']"></el-input>
      </template>
      <template #footer>
        <el-button>返回</el-button>
        <el-button @click="submit" type="primary">提交</el-button>
      </template>
    </ProForm>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      formData: { },
      configs: [
        {
          prop: 'customSlot',
          label: '插槽',
          required: true,
          slotName: 'customSlot'
        },
        {
          prop: 'TimeSelect',
          label: '时间选择器',
          componentName: 'TimeSelect',
          required: true,
          attr: {
            isRange: true,
            rangeSeparator: '至',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            valueFormat: 'hh:mm:ss'
          },
          events: {
            change: (e) => {
              console.log(e)
            }
          }
        },
        {
          prop: 'DatePicker',
          label: '日期选择器',
          componentName: 'DatePicker',
          required: true,
          attr: {
            type: 'daterange',
            rangeSeparator: '至',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            valueFormat: 'yyyy-MM-DD',
          },
          events: {
            change: (e) => {
              console.log(e)
            }
          }
        },
        {
          prop: 'upload',
          label: '文件上传',
          componentName: 'Upload',
          required: true,
          attr: {
            autoUpload: false,
            drag: false,
            disabled: false,
            tip: '只能上传jpg/png文件，且不超过1000kb',
            onChange: (e) => {
              console.log(e)
            },
            onPreview: (e) => {
              console.log(e)
            }
          },
          events: {}
        },
        {
          prop: 'Switch',
          label: '开关',
          componentName: 'Switch',
          attr: {
            activeText: '打开',
            inactiveText: '关闭'
          }
        },
        {
          prop: 'InputNumber',
          label: '数字输入框',
          componentName: 'InputNumber',
          attr: {
            min: 10,
            max: 20
          }
        },
        {
          prop: 'RadioGroup',
          label: '单选',
          componentName: 'RadioGroup',
          attr: {
            options: [
              {
                title: 1,
                value: 1,
                disabled: true
              },
              {
                title: 2,
                value: 2,
              },
            ]
          }
        },
        {
          prop: 'CheckboxGroup',
          label: '多选',
          componentName: 'CheckboxGroup',
          attr: {
            options: [
              {
                title: 1,
                value: 11,
                disabled: true
              },
              {
                title: 2,
                value: 22,
              },
            ]
          }
        },
        {
          prop: 'select',
          label: '下拉',
          componentName: 'Select',
          attr: {
            placeholder: 'ddddd',
            clearable: true,
            options: [
              {
                label: '1',
                value: '1'
              },
              {
                label: '2',
                value: '2'
              }
            ]
          },
          events: {
            input: (v) => {
              console.log(v)
            }
          }
        },
        {
          prop: 'input',
          label: '输入',
          componentName: 'Input',
          attr: {
            placeholder: 'ddddd',
            clearable: true,
          },
          events: {
            input: (v) => {
              console.log(v)
            }
          }
        },
      ],
      rules: {
        TimeSelect: [
          { message: '请选择时间', required: true },
          {
            validator: (rule, value, calllback) => {
            console.log (value)
            }
          }
        ],
        customSlot: [
          { message: '请填写插槽内容', required: true, trigger: 'blur' },
          {
            validator: (rule, value) => {
              console.log(value)
            }
          }
        ]
      }
    }
  },
  methods: {
    submit() {
      // console.log(this.formData)
      this.$refs.proForm.validate((valid => {
        console.log(valid)
      }))
      // this.$refs.proForm.validateField(['customSlot', 'TimeSelect'], (valid) => {
      //   console.log(valid)
      // })
    },
  }
}
</script>

<style scoped>

</style>
